<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="css/body.css?1">
		<title>入场登记</title>
		<style>
			.form-item{border-bottom:1px solid rgba(228, 228, 228, 1);margin:10px 0;
			display: flex;flex-wrap:wrap;}.p-form{padding:2vh 6.5%;}
			.form-item span{font-size: 14px;}
			.form-item span:nth-child(1){width:62px;text-align-last: justify;color:#666;}
			.form-item span:nth-child(2){width:calc(100% - 62px);}
			.form-item input{background:none;border:none;color:rgb(153, 153, 153);
			margin:0;border-radius: 0;}
			.form-item input,.form-item span,.form-item{height:40px;line-height: 40px;}
			.form-item input{font-size: 14px; font-weight: 400; color:#555;height:38px;line-height: 38px;}
			.mui-radio{display: flex;}.mui-radio input[type=radio]{transform: scale(.7);position: relative;right:0;margin-right: 15px;}
			.mui-icon-arrowright{position: relative;}
			.mui-icon-arrowright:before{ position: absolute;right:0;color: #bbb;font-size: 22px;}
			.p-sendcode{position: relative;}.p-qrts{width: 100%;display: flex;
			justify-content: center;}.p-qrts font{width:40px;height:25px;line-height: 25px;
			background:rgba(242, 242, 242, 1);text-align: center;}
			.p-qrts font:nth-child(2){border-left: 1px solid rgba(215, 215, 215, 1);border-right:1px solid rgba(215, 215, 215, 1);}
			.mui-btn-primary{position: absolute;right:0;}
			.p-qrts font{color: #aaa;font-size: 12px;}.p-qrts font.on{background: #04AF00;color: #fff;}
			.p-text{border:none;display: inline-block;width:100%;margin:0;}.p-text textarea{width:100%;height:6vh;font-size: 13px;border: 0;padding:0;
			color:#777;}.p-qrh{font-size: 13px;color:#333;border:0;}.p-qrh a{color:#02A7F0;}
			.mui-checkbox input[type=checkbox]{position: inherit;transform: scale(.7);display: inline-table;}
			.mui-checkbox.mui-left input[type=checkbox]{left:0;top: 2px;}
			.mui-checkbox.mui-left{margin-left:-10px;}
			.p-form .p-text span{display: block;width:100%;text-align-last:left;}
			.p-btn{margin:10px 0;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">登记记录</h1>
		</header>
		<div class="mui-content" id="page">
			<div class="p-form">
				<div class="form-item">
					<span>姓名</span><span><input v-model="form.compellation" type="text" placeholder="请输入真实姓名"></span>
				</div>
				<div class="form-item">
					<span></span><span class="mui-input-row mui-radio" style="padding-left: 30%;"><font color="#777">男</font><input v-model="form.sex" type="radio" name="sex" value="1">
					<font color="#777">女</font> <input v-model="form.sex" name="sex" type="radio" value="2"></span>
				</div>
				<div class="form-item">
					<span>证件号</span><span><input type="text" placeholder="内部用户写工号/外部用户写身份证号" v-model="form.idCard"></span>
				</div>
				<div class="form-item">
					<span>手机号</span><span><input type="text" placeholder="请输入手机号" v-model="form.phone"></span>
				</div>
				<div class="form-item">
					<span>所属单位</span><span class="mui-icon mui-icon-arrowright"><input @click.stop="getEnterprise" readonly v-model="form.enterpriseName" type="text" placeholder="选择或填写 所属公司/部门"></span>
				</div>
				<div class="form-item">	
					<span>参与项目</span><span class="mui-icon mui-icon-arrowright"><input @click.stop="getProject" readonly v-model="form.currentProjectName" type="text" placeholder="选择或填写 项目/场站？"></span>
				</div>
				<div class="form-item">	
					<span>入场时间</span><span><input readonly data-options="{}" v-model="form.approachTime" type="text" @click.stop="chooseTime($event)" placeholder="请选择入场时间"></span>
				</div>
				<div class="form-item p-text">
					<span>工作内容</span><span><textarea v-model="form.content" class="" placeholder="*请简单描述，进入场站要做的工作内容"></textarea>
					</span>
				</div>
				<div class="form-item p-qrh">
					<div class="mui-input-row mui-checkbox mui-left">
						<input name="checkbox1" v-model="dis" type="checkbox" @change="checkboxChange">我已阅读<a @click="xuzhi" href="javascript:;">《外来人员入场登记须知》</a></div>
				</div>
				
				<div class="p-btn" @click="submit">提交登记</div>
			</div>
			
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/jquery-3.2.1.min.js"></script>
	<script src="../js/mkeyplus.base.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/mui.picker.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
	<script type="text/javascript" src="../../../js/vue.js"></script>
	
	<script src="js/api.js?1"></script>
	<script>
		mui.init();
		var htapi = new HTGlobal();
		//避免重复绑定
		var selectEnterprise = function(data){
			return htapi.eventSelectEnterprise.call(htapi,data);
		}
		window.removeEventListener('eventSelectEnterprise',selectEnterprise);
		window.addEventListener('eventSelectEnterprise',selectEnterprise);
		
		var page = new Vue({
				el: '#page',
				data:{
					form:{
						sex:1,
						compellation:'',
						idCard:'',
						enterpriseId:'',
						projectId:'',
						phone:'',
						enterpriseName:'',
						currentProjectName:'',
						enterpriseProjectId:'',
						approachTime:'',
						content:''
					},dis:false
				},
				watch:{
					
				},
				methods:{
					getAdmissionNotice(){
						//调取入场需知
						var ff = this.form;
						var pid = ff.currentProjectId;
						
						if(!pid){
							mui.toast('请先选择参与的项目！');
							return false;
						}
						if(this.vrform())
						htapi.admissionNotice(pid,function(data){
							
							if(data.code == '0'){
								var _form = JSON.parse(JSON.stringify(ff));
								_form.data = data.data;
								mui.openWindowWithTitle({
								  url: '../home/notice.html',
								  id: './notice.html',
								  extras: {
									form: _form
								  }
								},
								{
									id:'title',
									height: "44px",
									backgroundColor: "#275EB1",
									bottomBorderColor: "#cccccc",
									title: {
										text:'入场须知',
										position:{
											top:'3px'
										},
										styles:{
											size: "17px",
											weight:'bold',
											align: "center",
											color:'#fff'
										}
									},
									back: {
										image: {
											base64Data:'',
											sprite: {
												top:'0px',
												left:'0px',
												width: "100%",
												height: "100%"
											},
											position: {
												top:'16px',
												left:'8px',
												width: "20px",
												height: "20px"
											}
										},
										click: function() {
											mui.fire(plus.webview.getWebviewById('./notice.html'), 'fromPageBackEvent');
										}
									}
								});
							}
						})
					},
					checkboxChange(){
						var fromNotice = localStorage.getItem('fromNotice');
						if(!fromNotice){
							this.dis = false;
							mui.toast('请先查看并确认签写《入场协议》');
						}else{
							this.form = JSON.parse(fromNotice);
						}
					},
					xuzhi(){
						//登记需知
						this.getAdmissionNotice()
					},
					getEnterprise(){
						htapi.enterpriseSearch(this.form);
						//htapi.getEnterpriseList(this.form);//旧调取方式
					},
					getProject(){
						htapi.getProjectList(this.form)
					},
					chooseTime(e){
						var t = e.currentTarget;
						var optionsJson = t.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = t.getAttribute('id');
						if(t.picker) {
							t.picker.show(function (rs) {
								t.picker.dispose();
								t.picker = null;
							});
						} else {
							t.picker = new mui.DtPicker(options);
							t.picker.show(function(rs) {
								page.form.approachTime=rs.text
								t.picker.dispose();
								t.picker = null;
							});
						}
						return false;
					},
					timestamp(time){
					  time = time.replace(/-/g,"/");
					  var date = new Date(time);
					  var str = Date.parse(date);
					  return str;
					},
					vrform(){
						var checkIdCard = function(str){
							if(str=='' || str.length<7 || str.length>18){
								return false;
							}else if(str.length<18){
								return /^p\d{6}$/i.test(str);
							}
							return true;
						};
						var t=this,form = t.form;
						if(form.compellation==''){
						    mui.toast('请输入姓名');
						    return false;
						}
						if(form.sex==''){
						    mui.toast('请选择性别');
						    return false;
						}
						if(!form.idCard){
							mui.toast('请输入身份证或集团工号！');
							return false;
						}
						if(!checkIdCard(form.idCard)){
						    mui.toast('请输入正确的身份证号或集团工号！');
						    return false;
						}
						if(form.enterpriseId==''){
						    mui.toast('请选择所属单位');
						    return false;
						}
						form.projectId = form.currentProjectId;
						if(form.projectId==''){
						    mui.toast('请选择所属项目');
						    return false;
						} 
						if (!(/^1[3456789]\d{9}$/.test(form.phone))) {
						  mui.toast('请输入正确的手机号');
						  return false; 
						}
						if(form.content==''){
						    mui.toast('请输入工作内容');
						    return false;
						}
						if(!form.approachTime){
							mui.toast('请选择入场时间！');
							return false;
						}
						return true;
					},
					submit(){
						if(!this.vrform()) return;
						var t=this,form = t.form;
						if(!t.dis){
							mui.toast('请确认阅读了《外来人员入场登记须知》');
							return false;
						}
						var approachTime = form.approachTime;
						form.approachTime=t.timestamp(form.approachTime);
						//console.log(JSON.stringify(form));return;
						htapi.registration(form,function(res){
							if(res.code=='0'){
								Object.keys(form).forEach(function(key){
									form[key] = '';
								});
								mui.alert('您已登记成功！','提示',function(){
									var page = plus.webview.getWebviewById('../record/index.html');
									mui.fire(page, 'update');
									plus.webview.currentWebview().close();
								});
							}else{
								mui.toast(res.msg)
							}
						});
						localStorage.removeItem('fromNotice')
						form.approachTime=approachTime;
					}
				}
		});
	</script>
</html>
